<template>
  <div class='noticeSwiper'>
    <div class="swiperOption-tontent"  v-for="(list,index) in msgData" :key="index">
        <div class="noticeSwiper-content">
            <div class="noticeSwiper-list">
                <div style="font-weight:bold;color:#ee5a8a;">住户信息：{{index+1}}</div>
                <div class="noticeSwiper-tittle" v-if="list.household_name">
                    <span>住户姓名：</span>
                    <span>{{list.household_name}}</span>
                </div>
                <div class="noticeSwiper-tittle" v-if="list.mobile">
                    <span>住户电话：</span>
                    <span>{{list.mobile}}</span>
                </div>
                <div class="noticeSwiper-tittle" v-if="list.sex==1">
                    <span>住户性别：</span>
                    <span>男</span>
                </div>
                <div class="noticeSwiper-tittle" v-if="list.sex==2">
                    <span>住户性别：</span>
                    <span>女</span>
                </div>
                <div class="noticeSwiper-tittle" v-if="list.other==0">
                    <span>家庭情况：</span>
                    <span>非特殊家庭</span>
                </div>
                <div class="noticeSwiper-tittle" v-if="list.other==1">
                    <span>家庭情况：</span>
                    <span>特殊家庭</span>
                </div>
                <div class="noticeSwiper-tittle" v-if="list.other==0">
                    <span>特殊说明：</span>
                    <span>无特殊说明</span>
                </div>
                <div class="noticeSwiper-tittle" v-if="list.other==1">
                    <span>特殊说明：</span>
                    <span>{{list.other_remark}}</span>
                </div>
                <div class="noticeSwiper-tittle" v-if="list.id_card">
                    <span>身份证号：</span>
                    <span>{{list.id_card}}</span>
                </div>
                <div class="noticeSwiper-tittle" v-if="list.address">
                    <span>居住地址：</span>
                    <span>{{list.address}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="household-content">
        <div class="submit" @click="showAdd">
            添加住户信息
        </div>
    </div>
  </div>
</template>
<script>
    export default{
      props:{
        msgData:{
            type:Array
        }
      },
      data(){
        return{

        }
      },
      methods:{
        showAdd(){
            this.$emit('getContent', null)
        }
      }
  }
</script>
<style scoped>
.noticeSwiper{
  width: 100%;
  height: auto;
}
.swiperOption-tontent:nth-last-child(2){
    padding-bottom: 1.5rem;
}
.noticeSwiper-content{
    width: 100%;

}
.noticeSwiper-list{
  padding: .2rem;
  border-radius: .1rem;
  margin: .2rem;
}
.noticeSwiper-tittle{
  display: flex;
  padding: .2rem 0;
  height: auto;
  line-height: .4rem;
  color: #000;
  font-weight: bold;
  font-size: .26rem;
  border-bottom: 1px solid #ccc;
}
.noticeSwiper-tittle span:nth-of-type(1){
  color: #FFC796;
  width: 30%;
}
.noticeSwiper-tittle span:nth-of-type(2){
  font-size: .24rem;
  width: 100%;
   /* border-bottom: 1px solid #ccc; */
}
.household-content{
    background: #fff;
    z-index: 111;
    width: 100%;
    position: fixed;
    bottom: 0;
}
.submit{
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  height: 100%;
  margin: 0 .3rem;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .45rem;
  text-align: center;
  font-weight: bold;
}
</style>
